import styles from './index.module.scss';
import techList from '@config/techStacks.config';
import { useState } from 'react';
import Article from '@components/article';
import articles from '@config/articles.config';

const TechStack = () => {

    const [currentTech, setCurrentTech] = useState('全部');

    return <div className={styles.tech_stack}>
        <nav className={styles.tech_nav}>
            {
                [{ tech: '全部', icon: '' }, ...techList].map((v, i) => {
                    return <span key={i}
                        className={`${styles.bar} ${styles[`bar_${i + 1}`]} ${v.tech === currentTech ? styles.active : ''}`}
                        onClick={() => {
                            setCurrentTech(v.tech);
                        }}
                    >
                        {v.tech}
                    </span>
                })
            }
        </nav>
        <div className={styles.articles}>
            {
                articles.map((v, i) => {
                    return <Article key={i} article={v} />
                })
            }
        </div>
    </div>
}

export default TechStack;